<template>
  <div class="echarts_line">
     <div id="myChart" style="width:100%;height:352px"></div>
  </div>
</template>

<script>
export default {
  name: 'eline',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  props: {
    data: Array,
  },
  watch: {
    data(val){
      console.log(val)
      this.drawLine();
    }
  },
  mounted () {
    this.drawLine();
  },
  methods: {
    drawLine () {
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById('myChart'));
      myChart.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            color: ["#ff763b", "#ff763b"],
            data: ['用户', '订单'],
            left: 'center',
            bottom: 'bottom'
        },
        grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['2019-01','2019-02','2019-03','2019-04','2019-05','2019-06'],
            axisLine: {
                lineStyle: {
                    color: "#999"
                }
            }
        }],
        yAxis: [{
            type: 'value',
            splitNumber: 4,
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#DDD'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#333"
                },
            },
            nameTextStyle: {
                color: "#999"
            },
            splitArea: {
                show: false
            }
        }],
        series: [
          {
            name: '用户',
            type: 'line',
            data: [2,5,10,27,35,50],
            lineStyle: {
                normal: {
                    width: 8,
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: '#6a8eff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#0e4cfd' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(106, 142, 255, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#6a8eff',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 100,*/
                    borderColor: "#6a8eff"
                }
            },
            smooth: true
          },
          {
              name: '订单',
              type: 'line',
              data: [23,60,20,36,23,85],
              lineStyle: {
                  normal: {
                      width: 8,
                      color: {
                          type: 'linear',

                          colorStops: [{
                              offset: 0,
                              color: '#ffc480' // 0% 处的颜色
                          }, {
                              offset: 1,
                              color: '#ff763b' // 100% 处的颜色
                          }],
                          globalCoord: false // 缺省为 false
                      },
                      shadowColor: 'rgba(255, 118, 59, 0.3)',
                      shadowBlur: 10,
                      shadowOffsetY: 20
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#ff763b',
                      borderWidth: 10,
                      /*shadowColor: 'rgba(72,216,191, 0.3)',
                      shadowBlur: 100,*/
                      borderColor: "#ff763b"
                  }
              },
              smooth: true
          }
        ]
      });
      setTimeout(function (){
          window.onresize = function () {
            myChart.resize();
          }
      },200)
    }
  }
}
</script>
<style lang="less">
  
</style>